import { ReactElement } from 'react'
import { Form, Select, Row, Col } from 'antd'
import style from './index.module.less'
import UnitNumberInput from '@components/unitNumberInput'
import { CaseDocumentFullSchema } from '@components/schema/caseSchema'

const { Option } = Select

const { List, Item } = Form

function Main (name: string, list: CaseDocumentFullSchema[], disabled?: boolean): ReactElement {
  return (
    <List name={name}>
      {(fields, { add, remove }, { errors }) => (
        <>
          {
            fields.map((field, index) => {
              return (
                <div className={style.line} key={field.key}>
                  <Row className={style.input}>
                    <Col span={16}>
                      <Item noStyle name={[field.name, 'key']} fieldKey={[field.key, 'key']}>
                        <Select placeholder='请选择文书' showSearch allowClear>
                          {
                            list.map((li, i) => {
                              return <Option key={i} value={li.key}>{li.title}</Option>
                            })
                          }
                        </Select>
                      </Item>
                    </Col>
                    <Col span={8}>
                      <div className={style['count-input']}>
                        <Item noStyle name={[field.name, 'count']} fieldKey={[field.key, 'count']}>
                          <UnitNumberInput unit='天' />
                        </Item>
                      </div>
                    </Col>
                  </Row>
                  {
                    (disabled !== undefined && !disabled) && (
                      index === fields.length - 1
                        ? (
                        <div className={style['btn-block']} onClick={() => add()}>
                          <button className={style.btn} type='button'>+</button>
                        </div>
                          )
                        : (
                        <div className={style['btn-block']} onClick={() => remove(field.name)}>
                          <button className={style.btn} type='button'>-</button>
                        </div>
                          )
                    )
                  }
                </div>
              )
            })
          }
        </>
      )}
    </List>
  )
}

export default Main
